<template>
<div>
    <i-form ref='myForm' :dataForm='dataForm'></i-form>
      <lib-doc :libDocData="libDocData"></lib-doc>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IForm } from 'wd-platform-library'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { FormInterFace, FormDataInterFace } from 'wd-platform-library/lib/src/IForm/src/IFormInterFace'
import { getCheckListByTree } from 'wd-platform-utils'
interface DataFormInterFace {
    cascaderList:Array<any>;
    displayValue:any
}
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const myForm = ref()
        const dataList = [
            {
                id: 10891065345474561,
                menuName: '权限管理',
                children: [
                    {
                        id: 10948510534696991,
                        menuName: '角色管理'
                    },
                    {
                        id: 10948510534697001,
                        menuName: '菜单管理'
                    },
                    {
                        id: 10948510534697011,
                        menuName: '用户管理'
                    },
                    {
                        id: 10948510534697021,
                        menuName: '资源管理'
                    },
                    {
                        id: 10948510534697031,
                        menuName: '资源组管理'
                    }
                ]
            },
            {
                id: 10948510534696971,
                menuName: '系统管理',
                children: [
                    {
                        id: 10948510534697041,
                        menuName: '应用管理'
                    },
                    {
                        id: 1094851053469705,
                        menuName: '机构管理'
                    }
                ]
            }
        ]
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                cascaderList: [],
                displayValue: []
            },
            fieldDataList: [
                {
                    type: 'cascader', // form表单类型
                    label: '级联选择框', // 字段描述信息
                    field: 'cascaderList', // form 对应字段
                    options: {
                        // 配置自定义字段  展示数据label,值value
                        fieldNames: { label: 'menuName', value: 'id', children: 'children' }
                    },
                    callback: (data: any, item:any, form:any) => {
                        alert(data)
                        var list = getCheckListByTree({ treeList: item.dataList, checkList: data, field: 'id' })
                        console.log(list)
                    },
                    dataList: dataList
                },
                {
                    type: 'cascader', // form表单类型
                    label: '自定义展示格式', // 字段描述信息
                    field: 'displayValue', // form 对应字段
                    options: {
                        // 配置自定义字段  展示数据label,值value
                        fieldNames: { label: 'menuName', value: 'id', children: 'children' },
                        // 自定义展示格式
                        displayRender: ({ labels }: { labels: string[] }) => {
                            return labels[labels.length - 1]
                        },
                        expandTrigger: 'hover'
                    },
                    dataList: dataList
                }
            ]
        })
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { IForm } from 'wd-platform-library'
        <i-form ref='myForm' :dataForm='dataForm'> </i-form> `
                },
                {
                    label: '创建表单对象',
                    type: 'pre',
                    value: `
        const dataForm: FormInterFace<DataFormInterFace> = reactive({
            labelWidth: 80, // 文本宽度
            form: {
                cascaderList: [],
                displayValue: []
            },
            fieldDataList: [
                {
                    type: 'cascader', // form表单类型
                    label: '级联选择框', // 字段描述信息
                    field: 'cascaderList', // form 对应字段
                    //配置antdv自带属性
                    options: {
                        //配置自定义字段  展示数据label,值value
                        fieldNames: { label: 'menuName', value: 'id', children: 'children' }
                    },
                    //选择回调
                    callback: (data: any) => {
                        alert(data)
                    },
                    dataList: dataList
                },
                {
                    type: 'cascader', // form表单类型
                    label: '自定义展示格式', // 字段描述信息
                    field: 'displayValue', // form 对应字段
                    //配置antdv自带属性
                    options: {
                        fieldNames: { label: 'menuName', value: 'id', children: 'children' },
                        // 自定义展示格式
                        displayRender: ({ labels }: { labels: string[] }) => {
                            return labels[labels.length - 1]
                        },
                        expandTrigger: 'hover'
                    },
                    dataList: dataList
                }
            ]
        }) `
                }

            ]
        }
        return {
            libDocData,
            myForm,
            dataForm
        }
    },
    methods: {
    },
    components: {
        IForm,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template{
    display: flex;
}
</style>
